<template>
<div>
     <Navigation></Navigation>
      <h1>用户管理-角色分配</h1>
<Center>

  <p style="text-align: center; margin: 0 0 20px">角色分配</p>
  <div style="text-align: center">
    
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="value"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :render-content="renderFunc"
      :titles="['未分配角色','已分配角色']"
      :button-texts="['', '']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data">
      <!-- <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> -->
    </el-transfer>
  </div>
  
</Center>
</div>
</template>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>

<script>
import Center from '@/components/Center'
import Navigation from '@/components/Navigation'
  export default {
    components:{
     Navigation,
    Center,
    },
    data() {
      const generateData = _ => {
        const data = [];
        // for (let i = 1; i <= 15; i++) {
        //   data.push({
        //     key: i,
        //     label: `备选项 ${ i }`,
        //      disabled: i % 4 === 0
        //   });
        // }
        data.push({
          key:1,
          label:'系统管理员'
        })
       
        data.push({
          key:2,
          label:'门店管理员'
        })
        
        return data;
      };
      return {
        data: generateData(),
        value: [2,3],
        renderFunc(h, option) {
          return <span>{ option.key } - { option.label }</span>;
        }
      };
    },

    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      }
    }
  };
</script>